<template>
  <div class="wrap">
    <div class="left">
      <img src="../assets/815.jpg">
      <div class="dot" @mouseover="over1" @mouseleave="leave1"></div>
      <div class="dot" @mouseover="over2" @mouseleave="leave2"></div>
      <div class="dot" @mouseover="over3" @mouseleave="leave3"></div>
      <div class="dot" @mouseover="over4" @mouseleave="leave4"></div>
      <div class="dot" @mouseover="over5" @mouseleave="leave5"></div>
      <div class="rect" ref="rect1"><div style="padding: 0.5rem;">{{comment[0]}}</div></div>
      <div class="rect" ref="rect2"><div style="padding: 0.5rem;">{{comment[1]}}</div></div>
      <div class="rect" ref="rect3"><div style="padding: 0.5rem;">{{comment[2]}}</div></div>
      <div class="rect" ref="rect4"><div style="padding: 0.5rem;">{{comment[3]}}</div></div>
      <div class="rect" ref="rect5"><div style="padding: 0.5rem;">{{comment[4]}}</div></div>
    </div>
    <div class="right" @mousedown="scrollDown($event)" @mouseup="scrollLeave">
      <vue-seamless-scroll :data="listData" class="seamless-warp">
        <ul class="item">
          <li v-for="item in listData" :key="item.id">
            <span v-text="item.content" :data-id="item.id"></span>
            <span v-text="item.user"></span>
          </li>
        </ul>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>

export default {
  name: "graph",
  data(){
    return{
      comment:['珠饰 花边 蕾丝 荷叶边 四四方方，肩膀修身的设计很有魅力、很漂亮。 后面较宽且不舒服、有华丽的蕾丝条纹、高领讨人喜欢。','胸部不大所以衣服看起来有点怪、胸部地方集中、有点贴身。纽扣看起来很便宜，质量好像不太好。','比较紧，但是加码会使顶部很大，腰部有弹性/缩腰/短的。','宽松、长度刚刚好、袖口较大。','宽松、长度刚刚好、袖口较大。'],
      commentTmp:['珠饰 花边 蕾丝 荷叶边 四四方方，肩膀修身的设计很有魅力、很漂亮。 后面较宽且不舒服、有华丽的蕾丝条纹、高领讨人喜欢。','胸部不大所以衣服看起来有点怪、胸部地方集中、有点贴身。纽扣看起来很便宜，质量好像不太好。','比较紧，但是加码会使顶部很大，腰部有弹性/缩腰/短的。','宽松、长度刚刚好、袖口较大。','宽松、长度刚刚好、袖口较大。'],
      listData:[{id:0,content:'这件上衣真的很漂亮，质量很好。尺码偏大，我减小了一个尺码，做工很完美。颜色在现实中比在照片中更微妙。',user:'--用户226 ',result:['','','','','']},
        {id:1,content:'我订购了这件衬衫搭配一条裤子，但我不得不退了——这也是上衣退了的原因之一。风格很可爱，我喜欢后面夸张的钥匙孔。我当然可以找到其他的东西来搭配这件上衣，但这还是取决于我觉得，价格不值118美元。风格非常可爱。尺寸合适。',user:'--用户871',result:['','','','','']},
        {id:2,content:'这件上衣我买的尺码是最小号。我的腰围是34d26。我非常喜欢它。我搭配一件红色开襟羊毛衫。风格很可爱。',user:'--用户891 ',result:['','','我的腰围是34d26。','','']},
        {id:3,content:'我刚刚在当地的商店里看到了这件衬衫，风格是复古风，我试了一下，觉得这件衬衫非常漂亮!它实际上做得很好，比我从照片上想象的尺码要大一些。做工上到处都有不同的华丽的花边，包括衣领有令人惊叹的花边，袖子上的洞正好适合我。',user:'--用户1071 ',result:['包括衣领有令人惊叹的花边，','','','袖子上的洞正好适合我。','袖子上的洞正好适合我。']},
        {id:4,content:'我喜欢这件衬衫的款式和质量。它的风格是随意风。这件衬衫材质是完全透明的，很精致。尽管如此，它的风格是如此浪漫、女性化、独特和永恒。',user:'--用户1096 ',result:['','','','','']},
        {id:5,content:'这件衣服风格太扎眼了，而且材质比我想象的还要透光(所以即使里面有一件背心，穿起来也不好看)。衣领处即使把上面的扣子解开，我也几乎不能把它从我的头上穿过去!',user:'--用户1099 ',result:['衣领处即使把上面的扣子解开，我也几乎不能把它从我的头上穿过去!','','','','']},
        {id:6,content:'我的态度是喜欢这件上衣在我的夹克和毛衣下面分层的感觉!风格如此浪漫和美丽。我并没有经历前一位评论者抱怨的腰部过度蓬松的感觉。材质有点发痒，而且运到我家的那件衣服从商店衣架上被弄得肩部凹凸不平。所有这些由零售商员工在vlog上拍摄的漂亮造型照片都让我想要这件衬衫。不管模特的照片上发生了什么，都不能代表这件上衣风格看起来有多可爱。',user:'--用户1104 ',result:['','','我并没有经历前一位评论者抱怨的腰部过度蓬松的感觉。','','']},
        {id:7,content:'风格是漂亮的维多利亚风格衬衫。我的态度是穿起来又大又肥。',user:'--用户1106 ',result:['','','','','']},
        {id:8,content:'这件上衣很漂亮。衣领是高龄的，对我们这些年纪大一些，有时喜欢颈部覆盖的女孩来说，这是个不错的转变。我买了一件小号的，下摆有点长，但是腰部有松紧带，没有问题。我会把它塞进我的牛仔裤和裙子里。胳膊上的洞很完美。颜色是象牙色。',user:'--用户1108 ',result:['有时喜欢颈部覆盖的女孩来说，这是个不错的转变。','','但是腰部有松紧带','胳膊上的洞很完美。','胳膊上的洞很完美。']},
        {id:9,content:'我认为衣服的质量很好。尺寸要大一些。态度是很高兴买了它。',user:'--用户2037 ',result:['','','','','']},
        {id:10,content:'我真的很喜欢。我原以为是袖子比较长，但现在正好在肘部以上。态度是绝对推荐。',user:'--用户5872 ',result:['','','','我原以为是袖子比较长','我原以为是袖子比较长']},

      ]
    }
  },
  methods: {
    scrollDown(e) {
      let index = e.target.dataset.id;
      this.comment = this.listData[index].result;
      for(var i=0;i<this.comment.length;i++){
        if(this.comment[i].length===0) this.comment[i] = this.commentTmp[i];
      }
      this.over1();
      this.over2();
      this.over3();
      this.over4();
      this.over5();
    },
    scrollLeave() {
      this.comment = this.commentTmp;
      this.leave1();
      this.leave2();
      this.leave3();
      this.leave4();
      this.leave5();
    },
    over1(){
      this.$refs.rect1.style.opacity = "0.5";
    },
    leave1(){
      this.$refs.rect1.style.opacity = "0";
    },
    over2(){
      this.$refs.rect2.style.opacity = "0.5";
    },
    leave2(){
      this.$refs.rect2.style.opacity = "0";
    },
    over3(){
      this.$refs.rect3.style.opacity = "0.5";
    },
    leave3(){
      this.$refs.rect3.style.opacity = "0";
    },
    over4(){
      this.$refs.rect4.style.opacity = "0.5";
    },
    leave4(){
      this.$refs.rect4.style.opacity = "0";
    },
    over5(){
      this.$refs.rect5.style.opacity = "0.5";
    },
    leave5(){
      this.$refs.rect5.style.opacity = "0";
    },
  }
}
</script>

<style scoped>
/*.comment{*/
/*  color: white;*/
/*  border: 1px solid #0e94ea;*/
/*  margin: 0 3rem 0 1rem;*/
/*  font-size: 0.5rem;*/
/*  height: 42px;*/
/*  overflow: hidden;*/
/*}*/
/*.comment:hover{*/
/*  overflow: auto;*/
/*}*/
.wrap{
  margin-top: 1rem;
  display: flex;
}
.left{
  flex: 0 0 50%;
  position: relative;
}
.left .dot{
  position: absolute;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: black;
  opacity: 0;
}
.left .dot:hover{
  opacity: 0.5;
}
.left .dot:nth-child(2){
  left: 150px;
  top: 80px;
}
.left .dot:nth-child(3){
  left: 150px;
  top: 120px;
}
.left .dot:nth-child(4){
  left: 150px;
  top: 180px;
}
.left .dot:nth-child(5){
  left: 80px;
  top: 150px;
}
.left .dot:nth-child(6){
  left: 225px;
  top: 150px;
}
.left .rect{
  position: absolute;
  background-color: black;
  opacity: 0;
  color: white;
  font-size: 0.5rem;
}
.left .rect:nth-child(7){
  max-height: 100px;
  width: 140px;
  left: 1rem;
  top: 0;
}
.left .rect:nth-child(8){
  max-height: 100px;
  width: 140px;
  right: 1rem;
  top: 0;
}
.left .rect:nth-child(9){
  /*height: 150px;*/
  /*width: 90px;*/
  /*left: 1rem;*/
  /*top: 12rem;*/
  max-height: 100px;
  width: 120px;
  left: calc(1rem + 90px);
  top: 15rem;
}
.left .rect:nth-child(10){
  /*height: 100px;*/
  /*width: 120px;*/
  /*left: calc(1rem + 90px);*/
  /*top: 15rem;*/
  max-height: 150px;
  width: 90px;
  left: 1rem;
  top: 12rem;
}
.left .rect:nth-child(11){
  max-height: 150px;
  width: 90px;
  right: 1rem;
  top: 12rem;
}
/*.left .rect:nth-child(1){*/
/*  left: 0;*/
/*  top: 0;*/
/*}*/
.left img{
  width: 100%;
  /*padding:0 3rem 0 1rem;*/
  padding: 0 1rem;
  box-sizing: border-box;
  /*height: 300px;*/
  height: 350px;
}
.right{
  width: 50%;
}
.seamless-warp {
  box-sizing: border-box;
  /*border: 1px solid #0e94ea;*/
  height: 350px;
  overflow: hidden;
  font-size: 0.5rem;
  color: white;
  padding-right: 0.6rem;
  /*margin-right: 2rem;*/
  width: 100%;
}
ul{
  padding: 0!important;
  /*padding-left: 1rem!important;*/
}
li:nth-child(odd){
  background: #133654;
}
li:nth-child(even){
  background: #133654;
}
li{
  /*height: 50px;*/
  width: 100%;
  /*margin-top: 5px;*/
  list-style: none;
  /*padding-left: 1rem;*/
  /*margin-right: 1rem;*/
}
li:hover{
  cursor: pointer;
}
li span:nth-child(2){
  /*display: inline-block;*/
  text-align: right;
}
.seamless-warp li span{
  width: 300px;
  display:block;
  /*word-break:keep-all;*/
  /*white-space:nowrap;*/
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top: 2px;
  padding-top: 2px;
  padding-left: 1rem;
  /*height: 50px;*/
  /*-icab-text-overflow:ellipsis;*/
  /*-khtml-text-overflow:ellipsis;*/
  /*-moz-text-overflow: ellipsis;*/
  /*-webkit-text-overflow:ellipsis;*/
  /*word-break:keep-all;*/
}
/*.seamless-warp .item li {*/
/*  height: 50px;*/
/*  display: flex;*/
/*}*/
/*.seamless-warp .item li span{*/
/*  flex: 1;*/
/*  text-align: center;*/
/*  line-height: 50px;*/
/*  color: #fff;*/
/*  font-size: 0.5rem;*/
/*}*/
</style>
